<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>1-发ajax请求</title>
</head>
<body>
  <button id="getBtn">GET AJAX</button>
  <button id="postBtn">POST AJAX</button>
  <button id="putBtn">PUT AJAX</button>
  <button id="deleteBtn">Delete AJAX</button>

  <script>
    const getBtn = document.getElementById('getBtn')
    const postBtn = document.getElementById('postBtn')
    const putBtn = document.getElementById('putBtn')
    const deleteBtn = document.getElementById('deleteBtn')

    // 发get类型ajax请求
    getBtn.onclick = () => {
      // 1. 创建xhr对象
      const xhr = new XMLHttpRequest()
      //2. 指定请求头信息 => 初始化请求     还没有发请求
      xhr.open('GET', 'http://localhost:8081/server/2?name=tom&age=11', true) // 默认是true 代表异步
      // 3. 发送异步ajax请求(也是http)
      xhr.send() // get请求不能携带请求体, 所有没有参数
    }

    // 发post类型ajax请求
    postBtn.onclick = () => {
      // 1. 创建xhr对象
      const xhr = new XMLHttpRequest()
      //2. 指定请求头信息 => 初始化请求     还没有发请求
      xhr.open('POST', 'http://localhost:8081/server/3?name=tom2&age=12', true) // 默认是true 代表异步

      // 指定请求头 => 指定请求体数据的类型
      // xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=utf-8')
      xhr.setRequestHeader('Content-Type', 'application/json;charset=utf-8')
      // 3. 发送异步ajax请求(也是http)
      // xhr.send('sex=男&like=foot')
      xhr.send('{"sex":"女", "like": "basket"}')
    }

    // 发put类型ajax请求
    putBtn.onclick = () => {
      // 1. 创建xhr对象
      const xhr = new XMLHttpRequest()
      //2. 指定请求头信息 => 初始化请求     还没有发请求
      xhr.open('put', 'http://localhost:8081/server/4?name=tom3&age=13') // 默认是true 代表异步

      // 指定请求头 => 指定请求体数据的类型
      // xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=utf-8')
      xhr.setRequestHeader('Content-Type', 'application/json;charset=utf-8')
      // 3. 发送异步ajax请求(也是http)
      // xhr.send('sex=男&like=foot')
      xhr.send('{"sex":"女2", "like": "basket2"}')
    }

    // 发delete类型ajax请求
    deleteBtn.onclick = () => {
      // 1. 创建xhr对象
      const xhr = new XMLHttpRequest()
      //2. 指定请求头信息 => 初始化请求     还没有发请求
      xhr.open('delete', 'http://localhost:8081/server/5?name=tom4&age=14') // 默认是true 代表异步

      // 指定请求头 => 指定请求体数据的类型
      // xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=utf-8')
      xhr.setRequestHeader('Content-Type', 'application/json;charset=utf-8')
      // 3. 发送异步ajax请求(也是http)
      // xhr.send('sex=男&like=foot')
      xhr.send('{"sex":"女3", "like": "basket3"}')
    }



  </script>
</body>
</html>